<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>websocket测试</title>
</head>
<body>
<input id="demo" type="text"/>
<input type="button" value="发送" onclick="send();"/>
<div id="console">

</div>
</body>
</html>
<script>
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        socket = new WebSocket("ws://localhost:8082/websocket");
        //socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            display("服务端返回："+msg.data);
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
        //离开页面时，关闭socket
        //jquery1.8中已经被废弃，3.0中已经移除
        // $(window).unload(function(){
        //     socket.close();
        //});
    }
    function send(){
        var v=document.getElementById("demo").value;
        socket.send(v);
    }
    //appendChild(),在节点的最后追加子元素
    function display(msg){
        // 创建p节点
        var para=document.createElement("p");
        // 创建文本节点
        var node=document.createTextNode(msg);
        // 把文本节点添加到p节点里
        para.appendChild(node);

        // 查找div1
        var element=document.getElementById("console");
        // 把p节点添加到div1里
        element.appendChild(para);
    }
</script>
